<template>
  <div class="p-6">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-gray-800 mb-2">健康报告</h1>
      <p class="text-gray-600">查看您的健康状况分析报告</p>
    </div>

    <!-- 健康分析组件 -->
    <HealthAnalysis 
      :health-data="currentHealthData" 
      @score-calculated="onScoreCalculated"
      class="mb-6"
    />

    <!-- 日期范围选择 -->
    <el-card class="mb-6">
      <div class="flex items-center space-x-4">
        <span class="text-gray-700">选择日期范围：</span>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
        <el-button type="primary" @click="generateReport">生成报告</el-button>
        <el-button @click="exportReport">导出报告</el-button>
      </div>
    </el-card>

    <!-- 健康概览 -->
    <el-row :gutter="20" class="mb-6">
      <el-col :span="6">
        <el-card class="h-full">
          <div class="text-center">
            <div class="text-3xl font-bold text-green-600 mb-2">85</div>
            <div class="text-gray-600">健康评分</div>
            <el-progress 
              :percentage="85" 
              :color="colors"
              :show-text="false"
              class="mt-2"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="h-full">
          <div class="text-center">
            <div class="text-3xl font-bold text-blue-600 mb-2">12</div>
            <div class="text-gray-600">测量天数</div>
            <div class="text-sm text-gray-500 mt-1">本月累计</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="h-full">
          <div class="text-center">
            <div class="text-3xl font-bold text-purple-600 mb-2">8</div>
            <div class="text-gray-600">异常指标</div>
            <div class="text-sm text-gray-500 mt-1">需要关注</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="h-full">
          <div class="text-center">
            <div class="text-3xl font-bold text-orange-600 mb-2">24</div>
            <div class="text-gray-600">提醒次数</div>
            <div class="text-sm text-gray-500 mt-1">本月完成</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 血压分析 -->
    <el-card class="mb-6">
      <template #header>
        <span class="text-lg font-semibold">血压分析</span>
      </template>
      <el-row :gutter="20">
        <el-col :span="16">
          <HealthChart 
            title="血压趋势" 
            chart-type="line" 
            :data="bloodPressureData"
          />
        </el-col>
        <el-col :span="8">
          <div class="space-y-4">
            <div class="p-4 bg-red-50 rounded-lg">
              <div class="text-sm text-red-600 font-medium">收缩压</div>
              <div class="text-2xl font-bold text-red-700">125 mmHg</div>
              <div class="text-sm text-red-500">偏高 5 mmHg</div>
            </div>
            <div class="p-4 bg-blue-50 rounded-lg">
              <div class="text-sm text-blue-600 font-medium">舒张压</div>
              <div class="text-2xl font-bold text-blue-700">82 mmHg</div>
              <div class="text-sm text-blue-500">正常范围</div>
            </div>
            <div class="p-4 bg-green-50 rounded-lg">
              <div class="text-sm text-green-600 font-medium">建议</div>
              <div class="text-sm text-green-700">
                建议减少盐分摄入，增加有氧运动
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 体重分析 -->
    <el-card class="mb-6">
      <template #header>
        <span class="text-lg font-semibold">体重分析</span>
      </template>
      <el-row :gutter="20">
        <el-col :span="16">
          <HealthChart 
            title="体重变化" 
            chart-type="line" 
            :data="weightData"
          />
        </el-col>
        <el-col :span="8">
          <div class="space-y-4">
            <div class="p-4 bg-green-50 rounded-lg">
              <div class="text-sm text-green-600 font-medium">当前体重</div>
              <div class="text-2xl font-bold text-green-700">63.8 kg</div>
              <div class="text-sm text-green-500">目标: 62 kg</div>
            </div>
            <div class="p-4 bg-purple-50 rounded-lg">
              <div class="text-sm text-purple-600 font-medium">BMI指数</div>
              <div class="text-2xl font-bold text-purple-700">22.1</div>
              <div class="text-sm text-purple-500">正常范围</div>
            </div>
            <div class="p-4 bg-blue-50 rounded-lg">
              <div class="text-sm text-blue-600 font-medium">本月变化</div>
              <div class="text-2xl font-bold text-blue-700">-1.2 kg</div>
              <div class="text-sm text-blue-500">减重效果良好</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 心率分析 -->
    <el-card class="mb-6">
      <template #header>
        <span class="text-lg font-semibold">心率分析</span>
      </template>
      <el-row :gutter="20">
        <el-col :span="16">
          <HealthChart 
            title="心率趋势" 
            chart-type="line" 
            :data="heartRateData"
          />
        </el-col>
        <el-col :span="8">
          <div class="space-y-4">
            <div class="p-4 bg-indigo-50 rounded-lg">
              <div class="text-sm text-indigo-600 font-medium">平均心率</div>
              <div class="text-2xl font-bold text-indigo-700">72 bpm</div>
              <div class="text-sm text-indigo-500">正常范围</div>
            </div>
            <div class="p-4 bg-yellow-50 rounded-lg">
              <div class="text-sm text-yellow-600 font-medium">最高心率</div>
              <div class="text-2xl font-bold text-yellow-700">85 bpm</div>
              <div class="text-sm text-yellow-500">运动时</div>
            </div>
            <div class="p-4 bg-green-50 rounded-lg">
              <div class="text-sm text-green-600 font-medium">最低心率</div>
              <div class="text-2xl font-bold text-green-700">62 bpm</div>
              <div class="text-sm text-green-500">睡眠时</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 健康建议 -->
    <el-card>
      <template #header>
        <span class="text-lg font-semibold">健康建议</span>
      </template>
      <div class="space-y-4">
        <div class="flex items-start space-x-3">
          <div class="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
          <div>
            <div class="font-medium text-gray-800">血压管理</div>
            <div class="text-gray-600 text-sm">
              您的收缩压略高于正常值，建议减少盐分摄入，每天进行30分钟的有氧运动，如快走或游泳。
            </div>
          </div>
        </div>
        <div class="flex items-start space-x-3">
          <div class="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
          <div>
            <div class="font-medium text-gray-800">体重控制</div>
            <div class="text-gray-600 text-sm">
              您的体重控制得很好，继续保持当前的饮食和运动习惯，目标体重指日可待。
            </div>
          </div>
        </div>
        <div class="flex items-start space-x-3">
          <div class="w-2 h-2 bg-purple-500 rounded-full mt-2"></div>
          <div>
            <div class="font-medium text-gray-800">心率监测</div>
            <div class="text-gray-600 text-sm">
              您的心率变化在正常范围内，建议继续保持规律的运动习惯，有助于心血管健康。
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import HealthChart from '../components/HealthChart.vue'
import HealthAnalysis from '../components/HealthAnalysis.vue'

const dateRange = ref([])
const currentHealthData = reactive({
  bmi: { weight: 70, height: 175 },
  bloodPressure: { systolic: 125, diastolic: 82 },
  heartRate: 75,
  age: 30
})

const reportData = reactive({
  overview: {
    healthScore: 85,
    measurementDays: 30,
    abnormalIndicators: 2,
    completedReminders: 28
  },
  bloodPressure: {
    average: { systolic: 125, diastolic: 82 },
    trend: 'stable',
    abnormalDays: 5
  },
  weight: {
    change: -2.5,
    trend: 'decreasing',
    average: 70.5
  },
  heartRate: {
    average: 75,
    trend: 'stable',
    abnormalDays: 2
  },
  suggestions: [
    {
      type: 'warning',
      title: '血压偏高',
      content: '您的血压略高于正常范围，建议减少盐分摄入，增加有氧运动。'
    },
    {
      type: 'info',
      title: '体重控制良好',
      content: '您的体重呈下降趋势，请继续保持健康的饮食和运动习惯。'
    }
  ]
})

const onScoreCalculated = (scoreData) => {
  reportData.overview.healthScore = scoreData.score
}

const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 }
]

const bloodPressureData = computed(() => ({
  labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  datasets: [
    {
      label: '收缩压',
      data: [125, 123, 128, 126, 124, 127, 125],
      borderColor: 'rgb(239, 68, 68)',
      backgroundColor: 'rgba(239, 68, 68, 0.1)',
      tension: 0.4
    },
    {
      label: '舒张压',
      data: [82, 80, 85, 83, 81, 84, 82],
      borderColor: 'rgb(59, 130, 246)',
      backgroundColor: 'rgba(59, 130, 246, 0.1)',
      tension: 0.4
    }
  ]
}))

const weightData = computed(() => ({
  labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
  datasets: [
    {
      label: '体重 (kg)',
      data: [65, 64.8, 64.5, 64.3, 64.1, 63.8],
      borderColor: 'rgb(34, 197, 94)',
      backgroundColor: 'rgba(34, 197, 94, 0.1)',
      tension: 0.4
    }
  ]
}))

const heartRateData = computed(() => ({
  labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
  datasets: [
    {
      label: '心率 (bpm)',
      data: [65, 62, 72, 78, 75, 70, 68],
      borderColor: 'rgb(168, 85, 247)',
      backgroundColor: 'rgba(168, 85, 247, 0.1)',
      tension: 0.4
    }
  ]
}))

const generateReport = () => {
  console.log('生成报告:', dateRange.value)
  // 这里可以添加生成报告的逻辑
}
</script>